<template>
  <el-tabs v-model="tab" class="demo-tabs">
    <el-tab-pane label="上级序列" name="parent">
      <el-descriptions border :column="3" direction="vertical">
        <template v-for="row in parent">
          <el-descriptions-item label="时间段" min-width="170px" width="170px">
            <div v-html="row.time" style="text-align: center"></div>
          </el-descriptions-item>
          <el-descriptions-item label="变动介绍" min-width="150px" width="240px">
            <p>{{row.info}}</p>
            <p>{{row.url}}</p>
          </el-descriptions-item>
          <el-descriptions-item label="上级序列">
            <list :cols="parent_cols" :data="row.parent_path"></list>
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </el-tab-pane>
    <el-tab-pane label="用户等级" name="level">
      <list :cols="log_cols" :data="level"></list>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {ajax} from "@/js/api_tool.js";
import {iframe} from "@/js/tool.js";

export default {
  props: ['__iframe'],
  data(){
    let id = this.$get('id'), btns = undefined;
    return {
      id: id,
      tab: "parent",
      parent: [],
      level: [],
      score_level: [],
      log_cols: {
        time:{name:'time', label:'时间段', width:'300px'},
        level:{name:'level', label:'等级', width:'120px',type:'select_one',config:[]},
        // score_level:{name:'score_level', label:'积分段位', width:'80px'},
        info:{name:'info', label:'变动介绍', width:'200px'},
        url:{name:'url', label:'变动时地址', min_width:'120px'},
      },
      parent_cols: {
        layer:{name:'layer', label:'层级', width:'100px', fixed:'left'},
        id: {name:'id', label:'ID', width:'65px', fixed:'left'},
        head_img:{name:'head_img', label:'头像', width:'45px', type:'file_img'},
        phone:{name:'phone', label:'电话号码', width:'120px'},
        nickname:{name:'nickname', label:'昵称', width:'120px'},
        level:{name:'level', label:'等级', width:'120px',type:'select_one',config:[]},
        delete_time:{name:'delete_time', label:'注销时间', width:'165px', type:'datetime'},
      }
    }
  },
  methods: {
    set_time(list, ds){
      ds = ds || ' ~ ';
      let last_time = null;
      list.forEach(v=>{
        last_time = last_time ? last_time : '至今';
        v.time = v.create_time+ds+last_time;
        last_time = v.create_time;
      })
      return list;
    }
  },
  mounted() {
    let app = this;
    if (!this.__iframe) window['app'] = this;
    if (this.id) {
      ajax({url:'/admin/user/log_user_change?user_id='+this.id, cache:true}, (res)=>{
        this.parent = this.set_time(res.data.parent, "<br/>");
        this.level = this.set_time(res.data.level);
        this.score_level = this.set_time(res.data.score_level);
        return false;
      }, ()=>{
        if (this.__iframe){
          iframe.remove('user/log_user_change');
        }else {
          this.$router.push('index');
        }
      })
    }

    ajax({url:'/admin/user_level/list?order[id]=asc',cache:true},(res)=>{
      let level_config = [];
      res.data.list.forEach((row)=>{
        level_config.push({content:`(${row.level})${row.name}`, value:row.level});
      })
      this.log_cols.level.config = level_config;
      this.parent_cols.level.config = level_config;
      return false;
    })
  }
}
</script>
